<template>
	<view class="animated fadeIn faster">
		<view class="status-bar-height bg-bar"></view>
		<view class="p-3 bg-bar">
			<!-- #ifdef APP -->
			<view class="d-flex d-flex-center d-flex-middle mb-3">
				<text class="font32 font-bold">通讯录</text>
			</view>
			<!-- #endif -->
			<view class="search-box d-flex d-flex-center d-flex-middle" @click="search">
				<text class="iconfont icon-chazhao font-bold font30 mr-1" style="color:#949494"></text>
				<text style="color: #cdcdcd;">搜索</text>
			</view>
		</view>
		<unicloud-db ref="udb" @load="handleLoad" v-slot:default="{ data, loading, pagination, error, options }"
			collection="uni-id-users" field="_id,nickname,avatar_file" :where="udbWhere">
			<block v-for="item in data" :key="item._id">
				<view class="d-flex" v-if="item._id != userinfo._id"  @click="toChat(item._id)">
					<view class="avatar">
						<image class="rounded15" :src="item.avatar_file?.url || 'https://www.168802.xyz/avatar/avatarUrl.png'" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					
					<view class="callinfo d-flex-item d-flex d-flex-middle">
						<text class="font32">{{item.nickname}}</text>
					</view>
				</view>
			</block>
		</unicloud-db>
		
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				loadMoreStatus: 'more',
				udbWhere: '', //'_id != $cloudEnv_uid',
				userinfo:{
					_id:'',
					nickname:'游客',
					avatar_file:{
						url:'https://www.168802.xyz/avatar/avatarUrl.png'
					}
				}
			}
		},
		onReachBottom() {
			this.$refs.udb.loadMore();
		},
		onReady() {
			const userinfo = uni.getStorageSync('uni-id-pages-userInfo')
			if(userinfo){
				this.userinfo = userinfo
			}
		},
		methods: {
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			handleLoad(data, ended) {
				this.loadMoreStatus = ended ? 'noMore' :
				'more'; // oading 的状态，可选值：more（loading前）、loading（loading中）、noMore（没有更多了）
			},
			toChat(cid){
				uni.navigateTo({
				  url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + cid,
				  animationDuration: 300
				})
				// uni.navigateTo({
				// 	url: '/pages/chat/chat?user_id=' + cid
				// });
			},
		}
	}
</script>

<style scoped>
	.avatar{
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		padding-left: 30rpx;
		padding-right: 25rpx;
		
	}
	.callinfo{
		height: 144rpx;
		padding-right: 30rpx;
		border-bottom: solid 1px #ececec;
	}
</style>